<template>
  <div class="my-box">
    <p>使用pinia存储数据操作 ：</p>
    <!-- // 获取 store 的 state -->

    <div>
      <p>姓名：{{ store.data.name }}</p>
      <p>性别：{{ store.data.sex }}</p>
      <p>数字：{{ store.count }}</p>
    </div>

    <!-- // 获取 getter -->
    <div>
      <p style="margin-left: 20px">获取getter doubleCount方法：{{ store.doubleCount }}</p>
      <p style="margin-left: 20px">获取getter tripleCount方法：{{ store.tripleCount }}</p>
    </div>
    <!-- // 调用 mutations 方法 / 修改 store -->
    <div>
      <button @click="update" style="margin-left: 20px">修改用户信息</button>
      <button @click="replaceStore" style="margin-left: 20px">替换整个用户信息</button>
      <button @click="resetStore" style="margin-left: 20px">重置用户信息</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '../../store'
const store = useStore()

// 三种更新的方式 输出的内容最后的覆盖之前内容
function update() {
  // 通过 mutations 定义的方法修改 state
  store.updateData({ name: 'jack' }, 12)

  // 通过 store 直接修改
  store.data = { name: 'coco', sex: '女' }

  // 同时改变多个状态
  store.$patch((state) => {
    state.data = { name: 'james', sex: '男' }
    state.count = 2
  })
}

// 替换整个 state
function replaceStore() {
  store.$state = {
    count: 6666,
    data: {
      name: '已经被替换',
      sex: '性别被替换了',
    },
  }
}

// 重置state成最初是的状态
function resetStore() {
  store.$reset()
}
</script>

<style scoped>
.my-box {
  display: flex;
}
/* 支持CSS变量注入v-bind(color) */
</style>
